<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" label-width="90px">
          <el-form-item label="时间筛选：">
              <span class="label-left">下单</span>
              <el-date-picker
                  v-model="dateRange"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']"
                  align="right">
              </el-date-picker>

              <span class="label-last">支付</span>
              <el-date-picker
                  v-model="payRange"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']"
                  align="right">
              </el-date-picker>
          </el-form-item>
          <el-form-item label="基础信息：">
              <el-input v-model="queryParams.phone" placeholder="请输入手机号码" clearable style="width: 240px" />
              <el-select v-model="queryParams.pay_state" placeholder="请选择支付状态" clearable style="width: 160px">
                  <el-option label="全部" value="" />
                  <el-option label="未支付" value="0" />
                  <el-option label="已支付" value="1" />
              </el-select>
              <el-input v-model="queryParams.code" placeholder="请输入订单编号" clearable style="width: 240px" />
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
      </el-form>

      <el-table v-loading="loading" :data="saleList">
          <el-table-column type="index" :index="(queryParams.page - 1) * queryParams.pageSize + 1" width="50" fixed="left" />
          <el-table-column label="订单编号" align="center" prop="code" width="200" />
          <el-table-column label="下单时间" align="center" prop="create_time" width="160" />
          <el-table-column label="商品名称" align="center" prop="product_name" width="160" :show-overflow-tooltip="true" />
          <el-table-column label="价格" align="center" prop="pay_amount">
              <template slot-scope="scope">{{ scope.row.pay_amount / 100}}</template>
          </el-table-column>
          <el-table-column label="收货人" align="center" prop="real_name" :show-overflow-tooltip="true" />
          <el-table-column label="手机号" align="center" prop="phone" width="120" />
          <el-table-column label="收货地址" align="center" prop="address" width="200" :show-overflow-tooltip="true" />
          <el-table-column label="支付时间" align="center" prop="pay_time" width="160" />
          <el-table-column label="支付状态" align="center" prop="pay_state" >
              <template slot-scope="scope">{{ scope.row.pay_state == '1' ? '已支付':  '未支付'}}</template>
          </el-table-column>
          <el-table-column label="微信订单号" align="center" prop="out_trade_no" width="180" :show-overflow-tooltip="true" />
          <el-table-column label="操作" align="center" >
              <template slot-scope="scope">
                  <el-button size="mini" v-if="scope.row.pay_state !== 1" type="primary" @click="detele(scope.row.id)">删除</el-button>
              </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.page"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
      />
    </div>
</template>

<script>
import {  getList, deletePay } from "@/api/shop";

export default {
  data() {
      return {
          loading: true,	// 遮罩层
          queryParams: { 	// 查询参数
              page: 1,
              pageSize: 20,
          },
          payRange:[],
          dateRange: [],
          saleList:[],
          total:0,
      };
  },
  created() {
      this.getList();
  },
    methods: {
        getList() {
          this.loading = true;

          //下单时间处理
          this.dateRange = Array.isArray(this.dateRange) ? this.dateRange : [];
          this.queryParams.order_start_time = this.dateRange[0];
          this.queryParams.order_end_time = this.dateRange[1];

          //支付时间处理
          this.payRange = Array.isArray(this.payRange) ? this.payRange : [];
          this.queryParams.pay_start_time = this.payRange[0];
          this.queryParams.pay_end_time = this.payRange[1];

          getList(this.queryParams).then(res => {
              this.saleList = res.data.data
              this.total = res.data.total;
              this.loading = false;
          });
      },
      /** 搜索按钮操作 */
      handleQuery() {
          this.queryParams.page = 1;
          this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
          this.resetForm("queryParams");
          this.dateRange = []
          this.payRange = []
          this.queryParams = {
              page: 1,
              pageSize: 20
          }
          this.handleQuery();
      },
      detele(id){
          deletePay({id:id}).then(res => {
              if(res.code == 1){
                  this.getList()
                  this.$modal.msgSuccess("已删除");
              }else{
                  this.$modal.msgError(res.data.msg);
              }
          });
      }
  }
};
</script>

<style scoped>
  .label-left{display: inline-block;margin-right: 10px;}
  .label-last{display: inline-block;margin-left: 15px;margin-right: 5px;}
  .el-input,
  .el-select{margin-right: 20px;}
</style>